<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章管理</el-breadcrumb-item>
      <el-breadcrumb-item>文章列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="8"
          ><el-input placeholder="请输入内容">
            <el-button
              slot="append"
              icon="el-icon-search"
            ></el-button> </el-input
        ></el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogvisible = true"
            >添加文章</el-button
          >
        </el-col>
      </el-row>
      <!-- 表格区域 -->
      <el-table :data="articlelist" stripe border>
        <el-table-column prop="Id" label="Id" width="50px"> </el-table-column>
        <el-table-column prop="articlename" label="文章名"> </el-table-column>
        <el-table-column prop="articleintro" label="文章简介">
        </el-table-column>
        <el-table-column prop="articletype" label="文章类型"> </el-table-column>
        <el-table-column prop="sutouId" label="发布者id"> </el-table-column>
        <el-table-column prop="remarks" label="备注"> </el-table-column>
        <el-table-column prop="mg_state" label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.mg_state"
              @change="userStatechanged(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="130px">
          <template slot-scope="scope">
            <!-- 编辑按钮 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showEidtDialog(scope.row.id)"
            ></el-button>
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeUserInfo(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 文章列表
      articlelist: [
        {
          Id: 1,
          // 文章名
          articlename: '小红帽',
          // 文章简介
          articleintro: 'xxxxxxxxxxxx',
          // 文章类型
          articletype: 1,
          // 发布用户id
          sutouId: 1,
          // 备注
          remarks: ''
        }
      ]
    }
  },
  created () {

  },
  methods: {

  }
}
</script>

<style scoped>
</style>
